<template>
	<view>
		<view class="c" v-for="(item,index) in datalist">
			<view class="">
				<view class="">
					{{item.name}}
				</view>
				<view class="">
					<span class="sontext" v-for="(it,id) in item.device">已绑定:{{it.no_number}}</span>
				</view>

			</view>
			<view class="bts" @click="open(index)">
				确认绑定
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" style="width: 90%;">
			<view class="popc">
				<view class="popc_item">
					<view>
						设备备注
					</view>
					<view class="">
						<input type="text" v-model="title" placeholder="请输入设备备注" />
					</view>
				</view>
				<view class="popc_item">
					<view>
						设备押金
					</view>
					<view class="">
						<input type="text" v-model="deposit" placeholder="请输入设备押金" />
					</view>
				</view>
				<view class="bts2" @click="savebind">
					保存
				</view>
				<view class="tips" >
					提示：如诊所已绑定设备则不可重复绑定，防止误操作导致诊所设备直接下线，如需变更请联系平台管理员！
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				group_id: '',
				device_no: '',
				datalist: [],
				clinic_index: '',
				title:'', //设备备注
				deposit:'', // 设备押金
			}
		},
		onLoad(options) {
			console.log(options)
			this.device_no = options.device_no
			this.id = options.id
			this.getdata()
		},
		methods: {
			open(index) {
				this.clinic_index = index
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			getdata() {
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/allocation/get_sub_clinic',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						// clinic_id: uni.getStorageSync('token')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.datalist = result.data

						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			savebind(index) {
				var that = this
				if(that.title == ''){
					return uni.showToast({
						title:'请输入设备备注',
						icon:'none'
					})
				}
				if(that.deposit == ''){
					return uni.showToast({
						title:'请输入设备押金',
						icon:'none'
					})
				}
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: this.global.url + 'api/allocation/bindclinic',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						id:that.id,
						clinic_id: that.datalist[that.clinic_index]['id'],
						no_number: that.device_no,
						title:that.title,
						deposit:that.deposit
						// clinic_id: uni.getStorageSync('token')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	.c {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		margin: 0px auto;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

	}

	.bts {
		padding: 15rpx;
		border-radius: 10rpx;
		border: 1px solid #0000ff;
		color: #0000ff;
		font-size: 20rpx;
	}

	.sontext {
		font-size: 28rpx;
		color: #757575;
	}
	.popc{
		width: 600rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
	}
	.popc_item{
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		justify-content: space-around;
	}
	.bts2{
		padding: 25rpx;
		border-radius: 10rpx;
		border: 1px solid #0000ff;
		color: #0000ff;
		/* font-size: 20rpx; */
		color: #fff;
		background-color: #0000ff;
		width: 80%;
		margin: 0px auto;
		margin-top: 40rpx;
		text-align: center;
		
	}
	.tips{
		color: #7a7a7a;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
</style>